<template>
  <div class="box">
    <div class="zhu_zhaung_tu_box">
      <v-chart :options="options" autoresize/>
    </div>
    <span class="unit">单位: {{ unit }}</span>
  </div>
</template>

<script>
  export default {
    name: "bingTu",
    components: {},
    props: {
      value: {
        type: Object,
        default: () => {}
      },
      ispreview: Boolean
    },
    data() {
      return {
        unit: '',
        options: {
          title: {
            text: "",
            left: "40px",
            top: '0',
            show: true,
            textStyle: {
              color: "#fff"
            }
          },
          // 提示
          tooltip: {
            trigger: "item",
            show: true,
          },
          // 分类说明
          legend: {
            top: "5%",
            left: "center",
            show: false,
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          hoverAnimation: true,
          series: [
            {
              type: "pie",
              color:[
                'rgb(106, 240, 177)',
                'rgb(9, 117, 240)',
                'rgb(227, 233, 240)',
                'rgb(247, 183, 56)',
                'rgb(137, 240, 106)',
                'rgb(245, 138, 221)',
                'rgb(224, 85, 85)',
              ],
              radius: "50%",
              data: [],
              label: {
                normal: {
                  show: true,
                  fontSize: 16,
                  formatter:function(params) {
                    return params.data.name + '' + params.data.value + ' ' + params.data.unit
                  }
                }
              },
              itemStyle: {
                // borderRadius: 10,
                borderColor: 'rgb(0, 0, 0, 0)',
                borderWidth: 2,
              },
              label: {
                show: true,
                // position: "center",
                fontSize: 16,
                color: '#fff',
                formatter: function(params) {
                  return `{text|${params.data.name}}` + '\n' +
                  `{value|${params.data.value}}`
                    + ' ' + `{text|${params.data.unit}}` 
                    
                },
                rich: {
                  value: {
                    color: '#fff',
                    fontSize: '18px',
                    fontWeight: '500',
                    fontFamily: 'font_number',
                    letterSpacing: '2px'
                  },
                  text: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: '500',
                    fontFamily: 'font_number',
                    letterSpacing: '2px',
                  },
                }
              },
              labelLine: {
                show: true,
              },
              emphasis: {
                scale: true,  //是否开启高亮后扇区的放大效果。
                scaleSize: 15, //高亮后扇区的放大尺寸，在开启 emphasis.scale 后有效。
                label: {
                  show: true,
                  fontSize: 14,
                  fontWeight: 'bold'
                },
                textStyle: {
                  fontSize: '60',
                  fontWeight: 'bold'
                }
              },
            }
          ]
        },
        optionsStyle: {}, // 样式
        optionsData: {}, // 数据
        optionsSetup: {},
        flagInter: null
      };
    },
    watch: {
      value(val) {
        if (val.title == '人口统计') {
          this.options.title.show = false
        } else {
          this.options.title.text = val.title
        }

        this.options.series[0].data = val.data
        this.unit = val.unit
      }
    },
    mounted() {

    },
    methods: {
      
    }
  };
</script>

<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  position: relative;
  // background-color: #212121;
}

.zhu_zhaung_tu_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
  box-sizing: border-box;
  // background-color: #31fd2a;
}
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.unit { position: absolute; left: 10px; bottom: 0px; font-size: 14px; }
</style>
